<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			function $$(id) {
				return document.getElementById(id);
			}
			window.onload = function (){
				var cnv = $$("canvas");
				var cxt = cnv.getContext("2d");
				createPloygon(50,50,5,40,cxt);
				
				function createPloygon(dx,dy,n,size,cxt){
					cxt.beginPath();
					for (var i= 0;i<n;i++){
						var x=size *Math.cos(i*2*Math.PI/n)+dx;
						var y=size *Math.sin(i*2*Math.PI/n)+dy;
						cxt.lineTo(x,y);
					}
					cxt.fillStyle="red";
					cxt.fill();
					cxt.closePath();
				}
				cnv.addEventListener("mousedown",downfun);
				
				function downfun(e) {
					var x = e.clientX;
					var y = e.clientY;
					if (cxt.isPointInPath(x,y)){
						cnv.addEventListener("mousemove",movefun);
					}
					cnv.addEventListener("mouseup",upfun);
				}
				function movefun(e) {
					movex = e.clientX;
					movey = e.clientY;
					cxt.clearRect(0,0,cnv.width,cnv.height);
					createPloygon(movex,movey,5,40,cxt);
				}
				function upfun(e) {
					cnv.removeEventListener("mousemove",movefun);
				}
			}
		</script>
	</head>
	<body>
		<canvas id="canvas" width="300px" height="300px" style="border: 1px solid grey;"></canvas>
	</body>
</html>
